<template>
  <div class="baseEchart">
    <div class="echart" ref="echartRef"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, watchEffect } from 'vue'
import * as echarts from 'echarts'

import China from '../data/china.json'

import type { EChartsOption } from 'echarts'

interface IProps {
  option: EChartsOption
}
// 注册geo地图
echarts.registerMap('china', China as any)
const echartRef = ref<HTMLElement>()
const props = defineProps<IProps>()

onMounted(() => {
  const echartInstance = echarts.init(echartRef.value, 'light', { renderer: 'canvas' })

  watchEffect(() => {
    echartInstance.setOption(props.option)
  })

  window.addEventListener('resize', function () {
    echartInstance.resize()
  })
})
</script>

<style lang="scss" scoped>
.echart {
  height: 270px;
}
</style>
